<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">购物车</h1>
    <div class="flex flex-col lg:flex-row gap-8">
      <div class="lg:w-2/3">
        <div v-if="cartItems.length === 0" class="bg-white rounded-lg shadow-sm p-8 text-center">
          <i class="fa fa-shopping-cart text-gray-300 text-6xl mb-4"></i>
          <h3 class="text-xl font-medium text-gray-900 mb-2">购物车是空的</h3>
          <p class="text-gray-500 mb-6">添加商品到购物车开始购物吧</p>
          <router-link to="/" class="inline-block bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md transition-colors">
            继续购物
          </router-link>
        </div>
        <div v-else class="bg-white rounded-lg shadow-sm p-6">
          <div class="space-y-6">
            <CartItem 
              v-for="item in cartItems" 
              :key="item.id" 
              :item="item" 
            />
          </div>
          <div class="mt-6 pt-6 border-t border-gray-200">
            <button 
              class="text-red-600 hover:text-red-700 transition-colors flex items-center"
              @click="clearCart"
            >
              <i class="fa fa-trash mr-2"></i>清空购物车
            </button>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3">
        <div class="bg-white rounded-lg shadow-sm p-6 sticky top-24">
          <h2 class="text-xl font-bold mb-4">订单摘要</h2>
          <div class="space-y-3 mb-6">
            <div class="flex justify-between">
              <span class="text-gray-600">商品总价</span>
              <span>¥{{ subtotal.toFixed(2) }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">运费</span>
              <span>{{ shipping }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">优惠</span>
              <span class="text-red-500">-¥{{ discount.toFixed(2) }}</span>
            </div>
            <div class="flex justify-between pt-3 border-t border-gray-200">
              <span class="font-bold">订单总价</span>
              <span class="font-bold">¥{{ total.toFixed(2) }}</span>
            </div>
          </div>
          <button 
            class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md transition-colors font-medium"
            @click="checkout"
            :disabled="cartItems.length === 0"
          >
            去结算
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import CartItem from '../components/CartItem.vue'

const router = useRouter()
const store = useStore()

const cartItems = computed(() => store.getters.cartItems)
const subtotal = computed(() => store.getters.cartSubtotal)
const discount = computed(() => store.getters.cartDiscount)
const shipping = computed(() => store.getters.cartShipping)
const total = computed(() => store.getters.cartTotal)

const clearCart = () => {
  if (confirm('确定要清空购物车吗？')) {
    store.dispatch('clearCart')
  }
}

const checkout = () => {
  if (!store.getters.isLoggedIn) {
    router.push({ name: 'Login', query: { redirect: '/cart/checkout' } })
  } else {
    router.push('/cart/checkout')
  }
}
</script>    